import React, { Component } from 'react';
import {
    StyleSheet,
    View,
    Image,
    ImageBackground,
    TouchableHighlight,
    Dimensions
} from 'react-native';
import PropTypes from 'prop-types';
import Label from '../label';
import Color from '../../config/theme/standard/color';
import FontSize from "../../config/theme/standard/fonts";

export default class Card extends Component {
    constructor(props) {
        super(props);
    }
    // 
    componentDidMount() {
        // 监听屏幕宽度变化
        this.dimensionsListener = Dimensions.addEventListener('change', () => {
            this.forceUpdate();
        });
    }
    componentWillUnmount() {
        // 移除监听
        this.dimensionsListener && this.dimensionsListener.remove();

    }
    render() {
        let { full, onPress, bgColor, bgImg, headerIcon, headerTitle, headerTitleExtra, content, showShadow, disabled,
            footer, footerExtra, footerConStyles, showHeadLine, underlayColor, headerIconStyle, showBorder, showSeparatorLine, marginTop, marginBottom, titleDefault, titleExtraDefault, footerDefault, footerExtraDefault } = this.props;

        let cardStyles = full ? [styles.full] : [styles.card];
        let cardWidth = this.props.cardWidth ? this.props.cardWidth : Dimensions.get('window').width;
        cardStyles.push({
            marginTop: marginTop,
            marginBottom: marginBottom
        });
        if (full) {
            cardStyles.push({ width: cardWidth, });
        } else {
            cardStyles.push({
                //width:cardWidth-30,
            });
            if (showShadow) {
                cardStyles.push({
                    shadowOffset: { width: 2, height: 2 },
                    shadowOpacity: 0.5,
                    shadowRadius: 5,
                    shadowColor: 'rgba(151,151,151,1)',
                    //安卓中用于显示阴影
                    elevation: 4,
                });
            }
            if (bgImg) {
                cardStyles.push({ borderWidth: 0 });
            } else {
                cardStyles.push({ borderWidth: 0 });
            }
        }
        cardStyles.push({ backgroundColor: bgColor });
        let borderStyle;
        if (full && !showBorder) {
            cardStyles.push({ borderBottomWidth: 0 });
            cardStyles.push({ borderTopWidth: 0 });
        }

        const bgImgWidth = full ? cardWidth : cardWidth - 30;
        let bgImgStyle;
        if (full) {
            bgImgStyle = { resizeMode: 'cover' };
        } else {
            bgImgStyle = { borderRadius: 5, resizeMode: 'cover' }
        }

        let icon;
        if (headerIcon) {
            icon = (<Image source={headerIcon} style={[styles.headerIcon, headerIconStyle]} />);
        }

        let headConStyle;
        if (showHeadLine) {
            headConStyle = [styles.headerCon, styles.headerLine];
        } else {
            headConStyle = styles.headerCon;
        }
        //head
        let headerArea;
        if (headerIcon || headerTitle || headerTitleExtra || titleDefault || titleExtraDefault) {
            headerArea = (
                <View style={headConStyle}>
                    <View style={styles.headerTitle}>
                        {icon}
                        {titleDefault ? <Label text={titleDefault} labelStyle={{ fontSize: FontSize.card.titleFontSize, color: Color.card.title, fontWeight: '400' }} />
                            : headerTitle}
                    </View>
                    <View style={styles.headerTitleExtra}>
                        {/* {headerTitleExtra}        */}
                        {titleExtraDefault ? <Label text={titleExtraDefault} labelStyle={{ fontSize: FontSize.card.titleExtraFontSize, color: Color.card.titleExtra, fontWeight: '400' }} />
                            : headerTitleExtra}
                    </View>
                </View>
            );
        }

        let footerArea;
        if (footer || footerExtra || footerDefault || footerExtraDefault) {
            footerArea = (
                <View style={[styles.footerCon, footerConStyles]}>
                    <View style={styles.footer}>
                        {/* {footer} */}
                        {footerDefault ? <Label text={footerDefault} labelStyle={{ fontSize: FontSize.card.footerFontSize, color: Color.card.footer, fontWeight: '400' }} />
                            : footer}

                    </View>
                    <View style={styles.footerExtra}>
                        {/* {footerExtra} */}
                        {footerExtraDefault ? <Label text={footerExtraDefault} labelStyle={{ fontSize: FontSize.card.footerExtraFontSize, color: Color.card.footerExtra, fontWeight: '400' }} />
                            : footerExtra}
                    </View>
                </View>
            );
        }

        let separatorLine;
        if (showSeparatorLine && full && !showBorder) {
            separatorLine = (
                <View style={{ height: 1, backgroundColor: Color.border, marginLeft: 15 }}></View>
            );
        }
        return (
            <TouchableHighlight
                underlayColor={underlayColor}
                activeOpacity={1}
                onPress={onPress}
                disabled={disabled}
                style={{ alignItems: 'center', justifyContent: 'center' }}
            >
                <View style={cardStyles}>
                    <ImageBackground source={bgImg} style={{ width: bgImgWidth }} imageStyle={bgImgStyle}>
                        {headerArea}
                        <View style={styles.contentCon}>
                            {content}
                        </View>
                        {footerArea}
                        {separatorLine}
                    </ImageBackground>
                </View>
            </TouchableHighlight>
        );
    }
}

Card.propTypes = {
    //是否通栏
    full: PropTypes.bool,
    //按下事件
    onPress: PropTypes.func,
    //按下时颜色
    underlayColor: PropTypes.string,
    //背景颜色
    bgColor: PropTypes.string,
    //背景图片
    bgImg: PropTypes.any,
    //标题Icon
    headerIcon: PropTypes.any,
    //标题Icon样式
    headerIconStyle: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.number]),
    //标题内容
    headerTitle: PropTypes.any,
    //标题额外内容
    headerTitleExtra: PropTypes.any,
    //是否显示标题下分割线
    showHeadLine: PropTypes.bool,
    //card内容
    content: PropTypes.any,
    //底部内容容器样式
    footerConStyles: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.number]),
    //底部内容
    footer: PropTypes.any,
    //底部额外内容
    footerExtra: PropTypes.any,
    //通栏时是否显示上下边框
    showBorder: PropTypes.bool,
    //是否在下方显示分割线
    showSeparatorLine: PropTypes.bool,
    //组件所占用宽度
    cardWidth: PropTypes.number,
    //是否显示阴影
    showShadow: PropTypes.bool,
    //是否可用
    disabled: PropTypes.bool,
    //组件上边距
    marginTop: PropTypes.number,
    //组件下边距
    marginBottom: PropTypes.number,
    //标题默认样式
    titleDefault: PropTypes.string,
    //标题额外默认样式
    titleExtraDefault: PropTypes.string,
    //底部默认样式
    footerDefault: PropTypes.string,
    //底部额外默认样式
    footerExtraDefault: PropTypes.string,
}

Card.defaultProps = {
    full: true,
    showBorder: true,
    showHeadLine: true,
    bgColor: Color.white,
    showSeparatorLine: false,
    underlayColor: 'transparent',
    showShadow: true,
    disabled: false,
    marginTop: 10,
    marginBottom: 10,
}

const styles = StyleSheet.create({
    full: {
        flexDirection: "column",
        borderWidth: 1,
        borderLeftWidth: 0,
        borderRightWidth: 0,
        borderColor: Color.border,
        backgroundColor: Color.card.background,
    },
    card: {
        flexDirection: "column",
        borderRadius: 5,
        borderWidth: 1,
        borderColor: Color.border,
        backgroundColor: Color.card.background
    },
    headerCon: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingVertical: 11,
        marginLeft: 15,
        marginRight: 15
    },
    headerLine: {
        borderBottomWidth: 1,
        borderColor: Color.card.headLineColor
    },
    headerTitle: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
    },
    headerIcon: {
        width: 28,
        height: 28,
        resizeMode: 'contain',
        marginRight: 12
    },
    headerTitleExtra: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start',
    },
    contentCon: {
        paddingLeft: 15,
        paddingRight: 15
    },
    footerCon: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingVertical: 7,
        paddingLeft: 15,
        paddingRight: 15
    },
    footer: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start'
    },
    footerExtra: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'flex-start'
    }
});